<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<!--子页面容器-->
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <!-- 表格 -->
            <table id="table-system-menu" class="layui-table" lay-filter="table-system-menu"></table>
        </div>
    </div>
</div>

<!-- 工具栏模板 -->
<script type="text/html" id="toolbar-table-menu">
    <div class="layui-btn-container">
        <!-- 添加按钮 -->
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="btn-menu-add"><i class="fa fa-plus"></i> 添加</button>
        </div>
        <!-- 展开与否系列按钮 -->
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="btn-menu-expand"><i class="fa fa-expand"></i> 全部展开</button>
            <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="btn-menu-fold-diy"><i class="fa fa-arrows-h"></i> 折叠按钮</button>
            <button class="layui-btn layui-btn-success layui-btn-sm" lay-event="btn-menu-fold"><i class="fa fa-compress"></i> 全部折叠</button>
        </div>
        <!-- 下拉菜单：禁用与否 -->
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-btn-warm" id="btn-down-menuStatus">修改状态 <i class="fa fa-caret-down"></i></button>
        </div>
    </div>
</script>
<!--引入JS文件-->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'treeTable', 'dropdown'], function () {
        let $ = layui.jquery,
            form = layui.form,
            treeTable = layui.treeTable,
            dropdown = layui.dropdown;

        // 记录所有的菜单，方便折叠菜单
        let menus = [];
        // 渲染表格
        let table_menu = treeTable.render({
            elem: '#table-system-menu',     // 表单绑定的table标签
            method: 'GET',                  // 加载数据的请求方式
            url: '/system/menu/list/all',   //数据接口
            even: true,                     // 开启隔行背景
            parseData: function (d) {
                if (d.code === 200) {
                    return {
                        "code": 0,          //解析接口状态
                        "msg": d.msg,       //解析提示文本
                        "count": d.count,   //解析数据长度
                        "data": d.data      //解析数据列表
                    };
                } else
                    return d;
            },
            tree: {
                iconIndex: 3,           // 折叠图标显示在第几列
                isPidData: true,        // 是父子类型的数据格式
                idName: 'id',           // 主键名
                pidName: 'parentId',    // 父级名
                arrowType: 'arrow2',    // 自定义箭头风格
                getIcon: function (d) { // 自定义图标
                    // 是按钮：使用默认图标。非按钮：使用自定义图标。
                    if (d.type === "B") {
                        return '<i class="layui-icon layui-icon-file"></i>';
                    } else {
                        return '<i class="' + d.icon + '"></i>  ';
                    }
                }
            },
            toolbar: '#toolbar-table-menu', // 表格工具栏（左上方）
            defaultToolbar: ['filter'],     // 表格默认的工具栏（右上方）
            height: 'full-52', //高度最大化减去差值
            cols: [
                [
                    {type: "checkbox", width: 50},
                    {field: 'id', title: 'ID', width: 50, align: 'center'},
                    {field: 'sort', title: '排序', width: 50, align: 'center'},
                    {field: 'title', title: '菜单名称', minWidth: 250},
                    {field: 'href', title: '菜单链接', minWidth: 150},
                    {field: 'permission', title: '权限标识', minWidth: 150},
                    {
                        field: 'type', title: '类型', width: 100, align: 'center', templet: function (d) {
                            if (d.type === "N") {
                                return '<a class="layui-btn layui-btn-radius layui-btn-xs layui-bg-orange">顶级菜单</a>';
                            } else if (d.type === "C") {
                                return '<a class="layui-btn layui-btn-radius layui-btn-xs layui-bg-green">目录</a>';
                            } else if (d.type === "M") {
                                // 记录菜单的ID，方便折叠
                                menus.push(d.id)
                                return '<a class="layui-btn layui-btn-radius layui-btn-xs layui-bg-blue">菜单</a>';
                            } else {
                                return '<a class="layui-btn layui-btn-radius layui-btn-xs layui-bg-black">按钮</a>';
                            }
                        }
                    },
                    {
                        field: 'status', title: '状态', align: 'center', width: 95, templet: function (d) {
                            let checkStr = "";
                            if (d.status === 1) {
                                checkStr = " checked "
                            }
                            if (d.status === 2) {
                                checkStr = " checked disabled "
                            }
                            return '<input type="checkbox" lay-filter="check-menu-status" value="' + d.id + '" lay-skin="switch" lay-text="正常|禁用" ' + checkStr + '/>'
                        }
                    },
                    {
                        field: 'action', fixed: 'right', title: '操作', align: 'center', width: 150, templet: function (d) {
                            let returnStr = "";
                            if (d.editable === 0) {
                                returnStr += '<a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="edit">编辑</a> ';
                            } else {
                                returnStr += '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> ';
                            }
                            if (d.removable === 0) {
                                returnStr += '<a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="del">删除</a> ';
                            } else {
                                returnStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> ';
                            }
                            return returnStr;
                        }
                    }
                ]
            ],
            done: function () {
                table_menu.expandAll()  // 加载完成后，默认选择全部展开
                // 然后把菜单折叠起来
                // for (let i = 0; i < menus.length; i++) {
                //     table_menu.fold(menus[i]);
                // }
            }
        });

        /**
         * 表格上方工具栏按钮监听
         */
        treeTable.on('toolbar(table-system-menu)', function (obj) {
            console.log(obj.event)
            let toolbarEvent = obj.event;
            switch (toolbarEvent) {
                // 【添加】菜单
                case "btn-menu-add":
                    let menu_add_index = layer.open({
                        title: '添加菜单',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: false,
                        area: ['800px', '500px'],
                        content: '/system/menu/goAdd',
                        end: function () {
                            table_menu.refresh();
                        }
                    });
                    parent.layer.iframeAuto(menu_add_index);
                    break;
                // 【全部展开】菜单
                case "btn-menu-expand":
                    table_menu.expandAll();
                    break;
                // 【全部折叠】菜单
                case "btn-menu-fold":
                    table_menu.foldAll();
                    break;
                // 只【折叠按钮】
                case "btn-menu-fold-diy":
                    for (let i = 0; i < menus.length; i++) {
                        table_menu.fold(menus[i]);
                    }
                    break;
            }

        });

        // 【修改状态】下拉菜单，控制状态用
        dropdown.render({
            elem: '#btn-down-menuStatus',
            data: [{
                title: '开启', id: 1, templet: '开启 <i class="fa fa-check"> </i>'
            }, {
                title: '禁用', id: 0, templet: '禁用 <i class="fa fa-close"> </i>'
            }],
            click: function (obj) {
                // 选中菜单的ID即为新的status
                let newStatus = obj.id;
                // 读取所有选中的按钮
                let menuId = "";
                table_menu.checkStatus().map(function (d) {
                    if (!d.LAY_INDETERMINATE) {
                        menuId += (d.id + ",")
                    }
                })
                menuId = menuId.substring(0, menuId.lastIndexOf(',')); // 去掉末尾的逗号
                // 选中才响应
                if (menuId.length > 0) {
                    let actionText = newStatus === 1 ? "开启" : "禁用"
                    // 二次询问框
                    layer.confirm('确认要 ' + actionText + ' 选中的菜单吗？', {
                        title: false,
                        btn: ['确定', '取消'],
                        // 按钮【按钮1】的回调
                        btn1: function (index) {
                            // 加载层
                            let index_loading = layer.load(1, {
                                shade: [0.2, '#fff'] //0.1透明度的白色背景
                            });
                            // 执行ajax请求
                            $.post("/system/menu/changeStatus/" + newStatus, {menuIds: menuId}, function (data) {
                                // 关闭加载层
                                layer.close(index_loading)
                                // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                                if (data.code === 200) {
                                    layer.msg(data.msg, {time: 3000, icon: 1});
                                    table_menu.refresh();
                                } else {
                                    layer.msg(data.msg, {time: 3000, icon: 2});
                                }
                            });
                        },
                    });
                } else {
                    layer.msg('请先选择菜单', {time: 2000, icon: 7});
                }
            }
        });

        // 监听switch开关切换事件
        form.on('switch(check-menu-status)', function (data) {
            // 该值是操作之后的值
            let isChecked = data.elem.checked;
            console.log(isChecked)
            let actionText = isChecked ? "开启" : "禁用"
            let newStatus = isChecked ? "1" : "0"
            let menuId = data.value;
            layer.confirm('确认要 ' + actionText + ' 此菜单？', {
                title: false,
                btn: ['确定', '取消'],
                // 按钮【按钮1】的回调
                btn1: function (index) {
                    // 加载层
                    let index_loading = layer.load(1, {
                        shade: [0.2, '#fff'] //0.1透明度的白色背景
                    });
                    $.post("/system/menu/changeStatus/" + newStatus, {menuIds: menuId}, function (data2) {
                        // 关闭加载层
                        layer.close(index_loading)
                        // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                        if (data2.code === 200) {
                            layer.msg(data2.msg, {time: 3000, icon: 1});
                            data.elem.checked = isChecked;
                            form.render();
                            // 更新表格
                            table_menu.update(menuId, {status: isChecked ? 0 : 1});
                        } else {
                            layer.msg(data2.msg, {time: 3000, icon: 2});
                            data.elem.checked = !isChecked;
                            form.render();
                        }
                    });
                },
                // 按钮【按钮二】的回调
                btn2: function (index) {
                    data.elem.checked = !isChecked;
                    form.render();
                    layer.close(index);
                },
                // 按钮【X】的回调
                cancel: function (index) {
                    data.elem.checked = !isChecked;
                    form.render();
                    layer.close(index);
                }
            });
        });

        // 监听操作工具条
        treeTable.on('tool(table-system-menu)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            // 响应【改变状态】事件
            if (layEvent === 'changeStatus') {
                layer.msg('改变状态')
            }
            // 响应【编辑】事件
            else if (layEvent === 'edit') {
                if (data.editable === 1) {
                    // 弹出编辑窗口
                    const menu_edit_index = layer.open({
                        title: '编辑菜单',
                        type: 2,
                        shade: 0.2,
                        maxmin: false,
                        shadeClose: false,
                        area: ['800px', '500px'],
                        content: '/system/menu/goEdit/' + data.id,
                        end: function () {
                            table_menu.refresh();
                        }
                    });
                    parent.layer.iframeAuto(menu_edit_index);
                } else {
                    layer.msg('此菜单不允许编辑')
                }
            }
            // 响应【删除】事件
            else if (layEvent === 'del') {
                if (data.removable === 1) {
                    // 删除用户 - 确认
                    layer.confirm("<a style='color: red'>确认要删除菜单 " + data.title + "(ID：" + data.id + ") 吗？</a>", {
                        icon: 3, title: '删除菜单确认'
                    }, function (index) {
                        layer.close(index);
                        // 加载层
                        let index_loading = layer.load(1, {
                            shade: [0.2, '#fff'] //0.1透明度的白色背景
                        });
                        // 发起 删除用户 请求
                        $.post("/system/menu/remove", {id: data.id}, function (d) {
                            // 关闭加载层
                            layer.close(index_loading)
                            // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                            if (d.code === 200) {
                                layer.msg(d.msg, {time: 3000, icon: 1});
                                table_menu.reload()
                            } else {
                                layer.msg(d.msg, {time: 3000, icon: 2});
                            }
                        });
                    });
                } else {
                    layer.msg('禁止删除')
                }
            }
        });

    });
</script>
</body>
</html>